<template>
  <div class="shop-management">
    <div class="header-breadcrumb">
      <Breadcrumb :headerTitle="headerTitle" />
    </div>
    <div class="shop-management-title">店铺管理</div>
    <div class="line-between"></div>
    <!-- 搜索栏 -->
    <div class="shop-management-search">
      <div class="search-left">
        <div class="shop-management-search-input">
          <el-input
            placeholder="搜索店铺名称"
            suffix-icon="el-icon-search"
            v-model="shopKeyword"
          >
          </el-input>
        </div>
        <div class="shop-management-search-input">
          <span>站点:</span>
          <el-select v-model="siteValue" clearable placeholder="请设置站点">
            <el-option
              v-for="item in siteData"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            >
            </el-option>
          </el-select>
        </div>
        <div class="shop-management-search-input">
          <span>状态:</span>
          <el-select v-model="value" clearable placeholder="请选择状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="shop-management-search-input">
          <el-button type="primary" @click="getShopList">搜索</el-button>
        </div>
      </div>
      <div class="search-right">
        <el-button type="primary" @click="isAppendShopShow = true"
          >添加店铺</el-button
        >
        <el-button type="primary" plain @click="isLogisticsShow = true"
          >批量绑定物流渠道</el-button
        >
      </div>
    </div>
    <!-- 数据列表 -->
    <div class="shop-management-box">
      <el-table
        ref="managementTable"
        :data="shopData"
        border
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="managementChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="店铺">
          <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
          <template slot-scope="scope">
            <div class="shop-list">
              <div class="shop-list-name">
                名称:
                <span>{{ scope.row.title }}</span>
              </div>
              <div class="shop-list-name">
                站点:
                <span
                  v-for="(countries, countriesIdx) in scope.row.countries"
                  :key="countriesIdx"
                  >{{ countries.country }}
                  <span v-if="countriesIdx != scope.row.countries.length - 1"
                    >;</span
                  >
                </span>
              </div>
              <!-- <div class="shop-list-name">
                Seller ID:
                <span>叫花鸡</span>
              </div> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column label="绑定物流渠道">
          <template slot-scope="scope">
            <div class="shop-channel">
              <div class="shop-channel-not" v-if="scope.$index != 1">
                <span>未绑定</span>
                <span>去绑定</span>
              </div>
              <div class="shop-channel-bound" v-else>已绑定</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="260">
        </el-table-column>
        <el-table-column prop="address" label="状态" width="220">
          <template slot-scope="scope">
            <div class="shop-channel">
              <div class="shop-channel-not" v-if="scope.$index != 2">
                <span>未授权</span>
                <span @click="isShopAuthorizationShow = true">去授权</span>
              </div>
              <div class="shop-channel-bound" v-else>授权成功</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="150">
          <template slot-scope="scope">
            <div class="shop-active">
              <el-button
                type="primary"
                size="mini"
                @click="onAppendShopEdit(scope.row)"
                >编辑</el-button
              >
              <el-button type="warning" size="mini">禁用</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加店铺 -->
    <el-dialog
      :title="Object.keys(editAppendShop).length ? '编辑店铺' : '添加店铺'"
      :close-on-click-modal="false"
      :visible.sync="isAppendShopShow"
      width="30%"
      @closed="onClosedAppend"
    >
      <AppendShop
        ref="appendShopRed"
        :editShop="editAppendShop"
        @closeShopDialog="closeShopDialog"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="isAppendShopShow = false">取 消</el-button>
        <el-button type="primary" @click="onAppendShopConfig">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 店铺授权 -->
    <div class="shop-authorization">
      <el-dialog
        title="店铺授权"
        :close-on-click-modal="false"
        :visible.sync="isShopAuthorizationShow"
        width="30%"
      >
        <div class="shop-authorization-item">
          <div class="shop-authorization-name">
            店铺名称: <span>店铺名称</span>
          </div>
          <div class="shop-authorization-name">
            亚马逊站点: <span>美国, 加拿大, 巴西, 墨西哥</span>
          </div>
          <div class="shop-authorization-hint">
            *温馨提示, 请确保您在该店铺的常用IP环境进行操作, 以避免关联(
            建议使用VPN、紫鸟浏览器等)
          </div>
          <div class="shop-authorization-btn">
            <el-button
              type="primary"
              size="small"
              @click="isShopAuthorizationShow = false"
              >跳转授权</el-button
            >
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 绑定物流渠道 -->
    <div class="shop-logistics">
      <el-dialog
        title="绑定物流渠道"
        :close-on-click-modal="false"
        :visible.sync="isLogisticsShow"
        width="30%"
      >
        <div class="shop-logistics-box">
          <span>物流渠道:</span>
          <el-select v-model="logisticsValue" clearable placeholder="请选择">
            <el-option
              v-for="item in logisticsData"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isLogisticsShow = false">取 消</el-button>
          <el-button type="primary" @click="onBindLogistics">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb';
import AppendShop from './append-shop.vue';
import Shop from '@/api/shop';
import Way from '@/utils/way';
import { mapActions } from 'vuex';

export default {
  name: 'shopManagement',
  components: { Breadcrumb, AppendShop },
  props: {},
  data() {
    return {
      headerTitle: ['管理设置', '店铺管理'],
      value: '',
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
      ],
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
      ],
      shopKeyword: '', // 搜索店铺名称
      siteValue: '', // 站点
      isAppendShopShow: false, // 添加店铺
      isShopAuthorizationShow: false, // 店铺授权
      isLogisticsShow: false, // 绑定物流渠道
      shopData: [], // 店铺列表
      shopCheckValue: [], // 选中的店铺
      editAppendShop: {}, // 编辑信息
      logisticsData: [], // 物流列表
      logisticsValue: '', // 物流
    };
  },
  computed: {
    siteData() {
      return this.$store.state.shop.siteData;
    },
  },
  watch: {},
  created() {
    this.getShopList();
    this.shopSiteList();
    this.getLogisticsList();
  },
  methods: {
    ...mapActions('shop', ['shopSiteList']),
    // 数据列表复选框change事件
    managementChange(check) {
      this.shopCheckValue = check;
    },
    // 店铺管理列表
    getShopList() {
      const params = {
        page: 1,
        limit: 15,
        title: this.shopKeyword,
        site: '',
        status: '',
      };
      Shop.getShopList(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.shopData = res.data.rows;
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 增加店铺确定事件
    onAppendShopConfig() {
      this.$refs.appendShopRed.onAddShopList();
    },

    // 编辑
    onAppendShopEdit(item) {
      this.editAppendShop = item;
      this.isAppendShopShow = true;
    },

    // 添加店铺关闭窗口的回调
    onClosedAppend() {
      this.editAppendShop = {};
    },

    // 添加店铺关闭窗口
    closeShopDialog(isShow, num) {
      this.isAppendShopShow = isShow;
      if (num == 1) {
        this.getShopList();
      }
    },

    // 获取物流列表
    getLogisticsList() {
      const that = this;
      Shop.getShopLogisticList().then((res) => {
        if (res.code == 200) {
          that.logisticsData = res.data.rows;
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 绑定物流渠道
    onBindLogistics() {
      const that = this;
      const logisticsValue = that.logisticsValue;
      const shopCheckValue = that.shopCheckValue;
      if (!shopCheckValue.length) {
        return Way.setMessage('你还未选择店铺!', 2);
      } else if (logisticsValue == '') {
        return Way.setMessage('请选择物流渠道!', 2);
      }

      Shop.postBindLogistic({
        shop_id: Way.arrayToString(shopCheckValue, 'id'),
        logistics_id: logisticsValue,
      }).then((res) => {
        if (res.code == 200) {
          Way.setMessage('绑定成功', 1);
          that.isLogisticsShow = false;
          that.logisticsValue = '';
          that.shopCheckValue = [];
        } else {
          Way.setMessage(res.msg, 3);
        }
        console.log(res);
      });
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.shop-management {
  .shop-management-title {
    height: 50px;
    line-height: 50px;
  }
  // 搜索栏
  .shop-management-search {
    display: flex;
    justify-content: space-between;
    padding-top: 24px;

    .search-left {
      display: flex;

      .shop-management-search-input {
        padding-right: 24px;

        span {
          padding-right: 12px;
        }
      }
    }
  }
  // 数据列表
  .shop-management-box {
    padding: 24px 0;

    .shop-list {
      .shop-list-name {
        font-size: 12px;
      }
    }

    .shop-channel {
      display: flex;
      flex-direction: column;

      .shop-channel-not {
        display: flex;
        flex-direction: column;
        align-items: center;

        span:nth-child(2) {
          cursor: pointer;
          color: #4181ff;
        }
      }

      .shop-channel-bound {
        display: flex;
        justify-content: center;
      }
    }

    .shop-active {
      display: flex;
      // padding: 0 20px;

      .el-button {
        // margin-bottom: 12px;
        // margin-left: unset;
      }
    }
  }
  // 店铺授权
  .shop-authorization {
    .shop-authorization-item {
      .shop-authorization-name {
        padding-bottom: 12px;
        color: #00091a;
        span {
          color: #999;
        }
      }
      .shop-authorization-hint {
        padding-top: 12px;
        color: #f00000;
        font-size: 14px;
      }
      .shop-authorization-btn {
        display: flex;
        justify-content: center;
        margin: 24px 0 0;
      }
    }
  }
  // 绑定物流渠道
  .shop-logistics {
    .shop-logistics-box {
      display: flex;
      align-items: center;

      span {
        width: 80px;
      }
      .el-select {
        flex: 1;
      }
    }
  }
}
</style>
